<template>
  <div class="container">
    <Container>
      <!-- 筛选区域 -->
      <QuestionsFilter
        @searchFn="searchFn"
        @getquestionsChoiceList="getquestionsChoiceList"
      ></QuestionsFilter>
      <!-- 选项卡 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <!-- 数据展示区域 -->
          <DataDisplay :total="counts"></DataDisplay>
          <!-- 列表区域 -->
          <QuestionsChoiceTable
            :questionsChoiceList="questionsChoiceList"
            @getquestionsChoiceList="getquestionsChoiceList"
          ></QuestionsChoiceTable>
          <!-- 分页区域 -->
          <el-row type="flex" justify="end">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.page"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="page.pagesize"
              layout=" prev, pager, next,sizes,jumper"
              :total="counts"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <!-- 数据展示区域 -->
          <DataDisplay :total="questionsChoiceListA.length"></DataDisplay>
          <!-- 列表区域 -->
          <QuestionsChoiceTable
            :questionsChoiceList="questionsChoiceListA"
            @getquestionsChoiceList="getquestionsChoiceList"
          ></QuestionsChoiceTable>
          <!-- 分页区域 -->
          <el-row type="flex" justify="end">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.page"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="page.pagesize"
              layout=" prev, pager, next,sizes,jumper"
              :total="questionsChoiceListA.length"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <!-- 数据展示区域 -->
          <DataDisplay :total="questionsChoiceListB.length"></DataDisplay>
          <!-- 列表区域 -->
          <QuestionsChoiceTable
            :questionsChoiceList="questionsChoiceListB"
            @getquestionsChoiceList="getquestionsChoiceList"
          ></QuestionsChoiceTable>
          <!-- 分页区域 -->
          <el-row type="flex" justify="end">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.page"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="page.pagesize"
              layout=" prev, pager, next,sizes,jumper"
              :total="questionsChoiceListB.length"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <!-- 数据展示区域 -->
          <DataDisplay :total="questionsChoiceListC.length"></DataDisplay>
          <!-- 列表区域 -->
          <QuestionsChoiceTable
            :questionsChoiceList="questionsChoiceListC"
            @getquestionsChoiceList="getquestionsChoiceList"
          ></QuestionsChoiceTable>
          <!-- 分页区域 -->
          <el-row type="flex" justify="end">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.page"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="page.pagesize"
              layout=" prev, pager, next,sizes,jumper"
              :total="questionsChoiceListC.length"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页区域 -->
      <!-- <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row> -->
    </Container>
  </div>
</template>

<script>
import QuestionsFilter from '@/module-hmmm/components/questions-filter'
import QuestionsChoiceTable from '@/module-hmmm/components/questions-choice-table'
import { choice } from '@/api/hmmm/questions.js'
export default {
  components: {
    QuestionsFilter,
    QuestionsChoiceTable
  },
  data () {
    return {
      activeName: 'first', // tab栏默认选中
      questionsChoiceList: [], // 表格列表
      questionsChoiceListAll: [], // 全部表格列表
      page: {
        page: 1,
        pagesize: 5
      },
      counts: 0 // 精选题库全部列表总数
    }
  },
  computed: {
    // 待审核列表
    questionsChoiceListA () {
      return this.questionsChoiceListAll.filter((item) => item.chkState === 0)
    },
    // 已审核列表
    questionsChoiceListB () {
      return this.questionsChoiceListAll.filter((item) => item.chkState === 1)
    },
    // 已拒绝列表
    questionsChoiceListC () {
      return this.questionsChoiceListAll.filter((item) => item.chkState === 2)
    }
  },
  created () {
    this.getquestionsChoiceList()
  },
  methods: {
    // 搜索功能
    async searchFn (val) {
      // get参数过滤空值
      const query = { ...val, ...this.page }
      // const newquery = {}
      // for (const i in query) {
      //   if (query[i]) {
      //     newquery[i] = query[i]
      //   }
      // }
      Object.keys(query).forEach((key) => {
        if (!query[key]) {
          delete query[key]
        }
      })
      // console.log(query)
      const { data } = await choice(query)
      this.questionsChoiceList = data.items
      this.counts = data.counts
    },
    // tab被选中时触发
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 获取精选题库全部列表
    async getquestionsChoiceList () {
      const { data } = await choice(this.page)
      this.questionsChoiceList = data.items
      this.counts = data.counts
      const res = await choice()
      this.questionsChoiceListAll = res.data.items
      // console.log(data.items)
    },
    // 分页功能
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getquestionsChoiceList()
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.getquestionsChoiceList()
    }
  }
}
</script>

<style scoped lang="less">
.el-pagination {
  margin-top: 20px;
}
</style>
